<template>
  <Card>

    <p slot="title">
      <Icon type="android-delete"></Icon>
      草稿箱
    </p>

    <div class="body">
      <div style="margin-bottom: 25px">

        <Button style="margin-left: 20px" type="error" @click="deleteEvent">
          <Icon type="android-close" style="margin-right: 5px"></Icon>
          删除
        </Button>

        <Button @click="pushEvent" style="margin-left: 20px" type="success">
          <Icon type="paper-airplane" style="margin-right: 5px"></Icon>
          一键发布
        </Button>
      </div>

      <Table @on-selection-change="tabSelectChange" :loading="loading" :columns="columns" :data="data"></Table>

      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :page-size="pageConfig.size" :total="pageConfig.total" :current="pageConfig.currentPage"
                @on-change="changePage"></Page>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
  export default {
    name: "ArticleDraft",
    mounted() {
      this.$emit('selectMenu', '1-5-1');
    },
    data() {
      return {
        loading: false,
        columns: [
          {
            title: '序号',
            type: 'index'
          },
          {
            title: '标题',
            key: 'title',
            ellipsis: true
          },
          {
            title: '类别',
            key: 'sort'
          },
          {
            title: '创建时间',
            key: 'createTime',
            sortable: true
          },
          {
            title: '选择',
            type: 'selection'
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('Button', {
                props: {
                  type: 'info'
                },
                on: {
                  click: () => {
                    let id = this.data[params.index].id;
                    this.$router.push({name: 'UpdateArticle', params: {id, back: 'ArticleDraft'}});
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'ios-compose-outline'
                  },
                  style: {
                    marginRight: '5px'
                  }
                }),
                '编辑'
              ])
            }
          }
        ],
        data: [],
        selectedIds: [],
        pageConfig: {
          size: 6,
          total: 0,
          currentPage: 1
        }
      }
    },
    created() {
      this.request(1);
    },
    methods: {
      changePage(page) {
        this.request(page);
      },
      tabSelectChange(data) {
        this.selectedIds.length = 0;
        data.forEach(item => {
          this.selectedIds.push(item.id);
        })
      },
      deleteEvent() {
        if (this.selectedIds.length == 0) {
          this.$Message.error("请先选择");
          return;
        }
        this.axios.post(this.baseUrl+'/del-draft-list',
          JSON.stringify(this.selectedIds), {
            headers: {"Content-Type": "application/json"}
          })
          .then(response => {
            let data = response.data;
            if (data.code != 0) {
              this.$Message.success("删除成功");
              this.request(1);
            } else {
              this.$Message.error(data.msg);
            }
          }).catch(error => {
          this.$Message.error("服务器错误:" + error.status);
        });
        this.selectedIds.length = 0;
      },
      pushEvent() {
        if (this.selectedIds.length == 0) {
          this.$Message.error("请先选择");
          return;
        }
        this.http.postJson('/update-article-push-draft',
          this.selectedIds,
          data => {
            this.$Message.success("发布成功");
            this.request(1);
          }, error => {
            this.$Message.error(error);
          }
        )
      },
      request(page) {
        this.data.length = 0;
        this.loading = true;
        this.http.get('/get-draft-all', {
          isSplit: true,
          page: page,
          size: this.pageConfig.size
        }, data => {
          let list = data.records;
          this.pageConfig.total = data.total;
          this.pageConfig.currentPage = data.current;
          list.forEach(item => {
            let id = item.id;
            let title = item.title;
            let date = item.createtime;
            let sortName = item.sortName;
            let data = {
              title: title,
              sort: sortName,
              createTime: date,
              id: id
            };
            this.data.push(data);
          });
          this.loading = false;
        }, err => {
          this.$Message.error(error);
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    margin: 10px
</style>
